<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		/**CSS*/
		.btn {
		  background-color: rgba(0, 0, 0, 0);
		  border: 5px solid rgba(0, 183, 229, 0.9);
		  opacity: 0.9;
		  /* border-left: 5px solid rgba(0, 0, 0, 0);
		  border-right: 5px solid rgba(0, 0, 0, 0); */
		  border-radius: 50px;
		  box-shadow: 0 0 15px #2187e7;
		  width: 46px;
		  height: 46px;
		  line-height: 46px;
		  text-align: center;
		  position: absolute;
		  left: 50%;
		  top: 50%;
		  margin-left: -23px;
		  margin-top: -23px;
		}
		 
		.rotate {
		  -webkit-animation: anim 0.6s infinite alternate;
		  -ms-animation: anim 0.6s infinite alternate;
		  animation: anim 0.6s infinite alternate;
		}
		 
		@-webkit-keyframes anim {
		  from {
		    -webkit-transform: rotateY(180deg);
		  }
		 
		  to {
		    -webkit-transform: rotateY(360deg);
		  }
		}
		 
		@keyframes anim {
		  from {
		    transform: rotateY(180deg);
		  }
		 
		  to {
		    transform: rotateY(360deg);
		  }
		}
	</style>
	<body>
		<div class="btn rotate">開</div>
	</body>
</html>
